<!--
 * @Author: your name
 * @Date: 2021-07-21 15:55:53
 * @LastEditTime: 2021-08-30 17:05:08
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \usp-osm-frondend\src\views\orderCenter\components\apply.vue
-->
<template>
    <el-dialog
    :title="title"
    :visible.sync="isShow"
    width="50%"
    top="0"
    append-to-body
    @open="openDialog"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :wrapperClosable="false"
    destroy-on-close
    center
    :before-close="handleClose"
  >
    <v-table ref="swapTable" :data="swapTableData" border>
      <el-table-column
        label="商品名称"
        align="center"
        min-width="80"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          {{ scope.row.spuName }}
        </template>
      </el-table-column>
      <el-table-column
        label="SKU Code"
        align="center"
        min-width="100"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          {{ scope.row.spuName }}
        </template>
      </el-table-column>
      <el-table-column
        label="换货数量"
        align="center"
        min-width="100"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          {{ scope.row.spuName }}
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        min-width="120"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <el-select v-model="scope.row.isApprove" placeholder="请选择" size="mini" @change="approveChange">
            <el-option
              v-for="item in operationList"
              :key="item.dicCode"
              :label="item.dicName"
              :value="item.dicCode">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
    </v-table>
    <el-form
      :model="formData"
      label-position="top"
      ref="formData"
      :rules="rule"
    >
      <div v-if="examineStatus">
        <el-form-item label="商品是否需要寄回：" prop="sendBack">
          <el-radio-group @change="changeSend" v-model="formData.sendBack" ref="sendBack">
            <el-radio
              v-for="item in sendBackList"
              :key="item.dicCode"
              :label="item.dicName"
            >
              {{ item.dicName }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-if="isShowItem"
          style="margin-top: 10px"
          label="商品寄回方式："
          prop="sendMethod"
        >
          <el-radio-group v-model="formData.sendMethod">
            <el-radio
              v-for="item in sendMethodList"
              :key="item.dicCode"
              :label="item.dicCode"
            >
              {{ item.dicName }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="isShowItem" label="运费承担方：" prop="undertaker">
          <el-radio-group
            @change="undertakerChange"
            v-model="formData.undertaker"
          >
            <el-radio label="用户自付">用户</el-radio>
            <el-radio label="福特方">福特方</el-radio>
          </el-radio-group>
        </el-form-item>
      </div>
      <el-form-item label="备注：" prop="remarks" style="margin-bottom: 20px">
        <el-input type="textarea" v-model="formData.remarks"></el-input>
      </el-form-item>
      <span v-if="!hintMessage">请注意，点击【确定】后，审批同意的商品将会进入退款流程</span>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose" class="white-btn">取消</el-button>
      <el-button @click="onSubmit" :loading="submitting" class="search-btn">
        确定
      </el-button>
    </span>
  </el-dialog>
</template>
<script>
import Vue from 'vue'
import VTable from '@/components/PageTable/index'
import { USERNAME, USERID } from '@/config/variableInit'
import { approvalReturn } from '@/api/product'
export default {
  name: 'applyDialog',
  components: {
    VTable
  },
  props: {
    title: {
      type: String,
      default: String
    },
    returnStatusDialog: {
      type: String,
      default: String
    },
    deliveryMethodDialog: {
      type: String,
      default: String
    },
    refundId: {
      type: Number,
      default: Number
    },
    swapOrderId: {
      type: Number,
      default: Number
    },
    isShow: {
      type: Boolean,
      default: false
    },
    isApprove: {
      type: Boolean,
      default: true
    },
    selectList: {
      type: Array
    },
    dialogTableData: {
      type: Array
    },
    type: {
      type: String,
      default: 'return'
    }
  },
  mounted () {
    this.userName = Vue.ls.get(USERNAME)
    this.userId = Vue.ls.get(USERID)
  },
  data () {
    return {
      userName: '',
      checkStatus: '',
      swapTableData: [],
      operationList: [
        {
          dicCode: '1',
          dicName: '同意'
        },
        {
          dicCode: '2',
          dicName: '拒绝'
        }
      ],
      sendBackList: [
        {
          dicCode: '是',
          dicName: '是'
        },
        {
          dicCode: '否',
          dicName: '否'
        }
      ],
      sendMethodList: [
        {
          dicCode: '1',
          dicName: '用户自行寄回'
        },
        {
          dicCode: '2',
          dicName: '通过门店寄回'
        }
      ],
      auditRecordVoList: {},
      itemVoList: [],
      isApproveList: [],
      userIf: '',
      formData: {
        sendBack: '是',
        sendMethod: '',
        undertaker: '',
        remarks: ''
      },
      isShowItem: true,
      hintMessage: false,
      examineStatus: true,
      submitting: false,
      rule: {
        sendMethod: [
          { required: false, message: '请选择商品寄回方式', trigger: 'blur' }
        ],
        undertaker: [
          {
            required: true,
            message: '请选择一个运费承担方',
            trigger: 'blur'
          }
        ],
        remarks: [{ required: true, message: '备注不能为空', trigger: 'blur' }]
      }
    }
  },
  methods: {
    handleClose () {
      this.$parent.closeApply()
      this.formData.undertaker = ''
      this.formData.remarks = ''
    },
    fetchRelationList () {
      this.$emit('fetchRelationList')
    },
    openDialog () {
      this.swapTableData = []
      if (this.returnStatusDialog === '1') {
        this.examineStatus = true
        this.hintMessage = true
        this.dialogTableData.forEach(e => {
          if (e.returnStatus === '1') {
            this.swapTableData.push(e)
          }
        })
      } else {
        this.examineStatus = false
        this.dialogTableData.forEach(e => {
          if (e.returnStatus === '6') {
            this.swapTableData.push(e)
          }
        })
      }
      this.formData.sendMethod = this.deliveryMethodDialog
    },
    approveChange () {
      this.isApproveList = []
      this.dialogTableData.forEach(e => {
        this.isApproveList.push(e.isApprove)
      })
      if (this.returnStatusDialog === '1') {
        this.examineStatus = !this.isApproveList.every(e => {
          return e === '2'
        })
      }
      if (this.returnStatusDialog === '2') {
        this.hintMessage = !this.isApproveList.some(e => {
          return e === '1'
        })
      }
    },
    changeSend (val) {
      if (val === '是') {
        this.isShowItem = true
      } else {
        this.isShowItem = false
      }
    },
    undertakerChange (val) {
      // console.log(val)
    },
    onSubmit () {
      if (this.isApproveList.length > 0 && !this.isApproveList.includes(undefined)) {
        if (this.returnStatusDialog === '1') {
          this.auditRecordVoList = {}
          this.itemVoList = []
          this.dialogTableData.forEach(e => {
            this.itemVoList.push(
              {
                id: e.id,
                results: e.isApprove
              }
            )
          })
          this.auditRecordVoList = {
            operationId: this.userId,
            operationName: this.userName,
            freightBuyer: this.formData.undertaker,
            remark: this.formData.remarks
          }
          const params = {
            approveLevel: this.returnStatusDialog,
            orderId: this.refundId,
            isSendBack: this.formData.sendBack,
            returnMethod: this.formData.sendMethod,
            itemVoList: this.itemVoList,
            auditRecordVo: this.auditRecordVoList
          }
          if (this.examineStatus === false) {
            params.isSendBack = ''
            params.returnMethod = ''
          }
          this.$refs.formData.validate((valid) => {
            if (valid) {
              approvalReturn(params)
                .then(res => {
                  this.pageLoading = false
                  if (res) {
                    if (Number(res.code) === 1) {
                      const obj = res.obj
                      if (this.formData.sendBack === '是') {
                        this.$confirm('操作成功', {
                          confirmButtonText: '确定',
                          showCancelButton: false
                        })
                      } else if (this.formData.sendBack === '否') {
                        this.$confirm('已生成退款单号' + obj.refundNo + '，请点击前往查看', '操作成功', {
                          confirmButtonText: '确定',
                          showCancelButton: false
                        })
                      }
                      this.refundInfo = obj || {}
                      this.formData = {
                        undertaker: '',
                        remarks: ''
                      }
                    } else {
                      this.$confirm(res.code, {
                        confirmButtonText: '确定',
                        showCancelButton: false
                      })
                    }
                  }
                  this.$parent.closeApply()
                  this.fetchRelationList()
                })
            }
          })
        } else {
          this.auditRecordVoList = {}
          this.itemVoList = []
          this.dialogTableData.forEach(e => {
            this.itemVoList.push(
              {
                id: e.id,
                results: e.isApprove
              }
            )
          })
          this.auditRecordVoList = {
            operationId: this.userId,
            operationName: this.userName,
            remark: this.formData.remarks
          }
          const params = {
            approveLevel: this.returnStatusDialog,
            orderId: this.refundId,
            itemVoList: this.itemVoList,
            auditRecordVo: this.auditRecordVoList
          }
          this.$refs.formData.validate((valid) => {
            if (valid) {
              approvalReturn(params)
                .then(res => {
                  this.pageLoading = false
                  if (res) {
                    if (Number(res.code) === 1) {
                      const obj = res.obj
                      if (obj) {
                        this.$confirm('已生成退款单号' + obj.refundNo + '，请点击前往查看', '操作成功', {
                          confirmButtonText: '确定',
                          showCancelButton: false
                        })
                      } else {
                        this.$confirm('操作成功', {
                          confirmButtonText: '确定',
                          showCancelButton: false
                        })
                      }
                      this.refundInfo = obj || {}
                      this.formData = {
                        undertaker: '',
                        remarks: ''
                      }
                    } else {
                      this.$confirm(res.code, {
                        confirmButtonText: '确定',
                        showCancelButton: false
                      })
                    }
                  }
                  this.$parent.closeApply()
                  this.fetchRelationList()
                })
            }
          })
        }
      } else {
        this.$confirm('请选择审批结果', {
          confirmButtonText: '确定',
          showCancelButton: false
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
